<template>
  <div class="home">
    <van-nav-bar left-arrow class="nav-head">
      <template #left>
        <Back />
      </template>
      <template #right>
        <form action="/">
          <van-search
            v-model="searchValue"
            show-action
            placeholder="请输入搜索关键词"
            @search="methods.onSearch"
            @cancel="methods.onCancel"
            :clearable="false"
            shape="round"
          />
        </form>
      </template>
    </van-nav-bar>
    <div class="user-bg"></div>
    <div class="user-msg">
      <div class="collect-box">
        <div class="shop-box">
          <div class="item" v-for="(v, i) in shopData" :key="i">
            <div class="img-box">
              <img :src="v.image_url" alt="" @click="methods.next(v)" />
            </div>
            <p class="pro-name">{{ v.name }}</p>
            <p class="pro-enname">{{ v.enname || v.name }}</p>
            <p class="pro-price">￥{{ v.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { CoffeeModel, GET } from '@/api'
import Back from '@/components/Back.vue'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const searchValue = ref('')
/** 商品数据 */
const shopData = ref<CoffeeModel[]>([])

const methods = {
  onSearch() {
    GET({
      url: '/search',
      params: {
        keyword: searchValue.value
      }
    })
      .then((res) => {
        shopData.value = res.data.list
        shopData.value =
          shopData.value?.map((item) => {
            return {
              ...item,
              image_url: import.meta.env.VITE_APP_PROXY_URL + item.image_url
            }
          }) ?? []
      })
      .catch((err) => {
        console.error(err)
      })
  },
  onCancel() {},
  next(v) {
    router.push({ name: 'ShopMes', query: { pid: v.id } })
  }
}
onMounted(() => {
  searchValue.value = (route.query.name ?? '') as string
  methods.onSearch()
})
</script>

<style lang="less" scoped>
.home {
  background-color: rgb(245, 245, 245);
  height: 100vh;
  overflow: auto;
}
.nav-head {
  position: sticky;
  top: 0;
}
.user-bg {
  height: 160px;
  background-color: rgb(12, 52, 186);
}
.user-msg {
  width: 100%;
  position: relative;
  top: -40px;
}
:deep(.van-search) {
  padding: 0;
}
.collect-box {
  padding: 0 20px;
}
.shop-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  box-sizing: border-box;
  margin-bottom: 50px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff;
  .item {
    width: calc(100% / 3);
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    margin: 0;
    border-radius: 0;
    background-color: #fff;
    position: relative;
    .pro-enname {
      font-size: 12px;
    }
    p {
      margin: 2px 0;
      text-align: left;
      padding-left: 10%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .img-box {
      width: 80%;
      margin: 0 auto;
      img {
        width: 100%;
      }
    }
    .pro-price {
      color: rgb(12, 52, 186);
      font-weight: bold;
    }
    .bottom-slot {
      width: 20px;
      height: 20px;
      background-image: url(../../assets/images/回收站.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      bottom: 10px;
      right: 10px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
